<template>
  <div>
    <button @click="btn">弹框</button>
    <mydialog :visible.sync="dialogVisible" @close="close" title="提示">
      <template slot="center">
        <div class="center">这是一段信息</div>
      </template>
      <template slot="footer">
        <div class="footer">
          <button>取消</button>
          <button>确定</button>
        </div>
      </template>
    </mydialog>
  </div>
</template>

<script>
import mydialog from "../components/Mydialog";
export default {
  components: {
    mydialog,
  },
  data() {
    return {
      dialogVisible: false, //弹出层
    };
  },
  methods: {
    btn(val) {
      this.dialogVisible = true;
    },
    close(val) {
      this.dialogVisible = val;
    },
  },
  created() {},
  mounted() {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.center {
  margin: 50px 0;
}
.footer {
  display: flex;
  justify-content: flex-end;
  margin: 0 30px 0;
  button {
    margin: 0 10px;
  }
}
</style>
